//引入重置样式
require('../../assets/css/reset.css')

//引入公共样式
require('../../assets/css/property.css')

//加载自己的样式
require('./course-detail.less')

//引入封装的dom
require('../../assets/js/dom.js')

//复用的basic
require('../../assets/css/basic.less')

//引入fonts字体图标
require('../../assets/fonts/iconfont.css')

//获取axios工具函数
const request = require('../../utils/request')

//服务器地址
const API = 'http://fitness.h5.itsource.cn:3701'


function getMsg() {
    //如果错误显示信息提示框
    msg.style.display = 'block';

    // 计时器，1秒之后隐藏信息提示框
    setTimeout(() => {
        msg.style.display = 'none';
    }, 1000);
}

//等待dom加载完毕之后操作dom
document.ready(() => {
    const courseId = location.search.split('=')[1];
    // console.log(courseId);

    //获取dom
    const msg = document.querySelector('#msg');
    const img = document.querySelector('#img');
    const arrow = document.querySelector('#arrow');
    const start = document.querySelector('#start');
    const btn = document.querySelector('#btn');
    const calorie = document.querySelector('#calorie');
    const time = document.querySelector('#time');
    const name = document.querySelector('#name');
    const peoplenum = document.querySelector('#peoplenum');
    const arrow1 = document.querySelector('#arrow1');
    const desc = document.querySelector('#desc');
    const frequency = document.querySelector('#frequency');
    const instrument = document.querySelector('#instrument');
    const avatar = document.querySelector('#avatar');
    const user = document.querySelector('#user');


    //获取数据
    function getData() {
        //发请求
        request.get('/api/train/courseDetail', {
            params: {
                id: courseId,
                name: '笑狗'
            }
        }).then(res => {
            console.log('res.data :>> ', res.data);
            //解构
            let { errno, data, message } = res.data;
            //判断
            if (errno === 0) {
                render(data);
                //把训练数据存储到本地 给play页面用
                localStorage.setItem('fragments', JSON.stringify(data.fragments));
            } else {
                getMsg();
                msg.innerHTML = message;
            }
        })
    }
    //调用函数 初始化发送请求
    getData();


    //获取用户信息
    function getUserInfo() {
        request.get('/api/user/info').then(res => {
            //1 解构数据
            let { errno, data } = res.data;
            //2 判断
            if (errno === 0) {
                //3 处理业务逻辑
                avatar.src = API + data.imgUrl;
                user.textContent = data.nickName;
            }
        })
    }
    getUserInfo();

    //渲染函数 渲染dom更新dom
    function render(data) {
        //图片渲染 服务器地址+相对路径+文件名
        img.src = API + data.imgurl;
        calorie.textContent = data.calorie;
        time.textContent = data.time;
        name.textContent = data.name;
        peoplenum.textContent = data.peoplenum;
        desc.textContent = data.desc;
        frequency.textContent = data.frequency;
        instrument.textContent = data.instrument;
    }

    //事件注册
    arrow.addEventListener('click', () => {
        // console.log(1);
        location.href = './course.html';
    })

    //事件注册
    start.addEventListener('click', () => {
        // console.log(1);
        location.href = './play.html';
    })

    //事件注册
    btn.addEventListener('click', () => {
        // console.log(1);
        location.href = './play.html';
    })

    //事件注册
    arrow1.addEventListener('click', () => {
        // console.log(1);
        location.href = './play.html';
    })

})